<script setup lang="ts">
import { ref } from 'vue'
// 模拟数据
import { persons, departments } from './data'
import type { Persons } from './data'
import DeptOrPerson from './DeptOrPerson.vue'

const checkedPersons = ref<Persons[]>([])
const confirm = (data: any) => {
  console.log(data)
  checkedPersons.value = data.checkedPersonsNode.value
}
</script>

<template>
  <div>
    <DeptOrPerson :persons="persons" :departments="departments" @confirm="confirm">
      <template v-slot="data">
        <el-button type="success" @click="data.setVisible(true)">
          选择人员
        </el-button>
      </template>
    </DeptOrPerson>

    <hr />
    <h3>选择的人员：</h3>
    <div>
      <span v-for="item in checkedPersons" :key="item.value">
        {{ item.label }};
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
